<!DOCTYPE html>
<html>
<head>
   <!--    <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> -->
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="/public/css/element-ui/index.css">
    <link rel="stylesheet" href="/public/css/icon/iconfont.css">
    <!-- import Vue before Element -->
    <script src="/public/js/vue.js"></script>
    <!-- 引入 http-vue-loader -->
    <script src="/public/js/http-vue-loader"></script>
    <title>生产管理</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }


    .rili-time {
        font-size: 24px;
        color: red;
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }

    .el-carousel__container {
        height: 340px;
    }

    .el-aside .el-carousel {
        margin: 5px;
        border: 2px solid #ccc;
        border-radius: 9px;
    }

    .rili {
        margin: 5px;
        border: 2px solid #ccc;
        border-radius: 9px;
        margin-top: 0px;
        border-top: none;
        padding: 10px 0 0 0 ;
    }

    .rili-block {
        border: 1px solid #ccc;
        /*padding: 20px;*/
    }

    .rili-date {
        display: block;
        width: 100%;
        font-size: 18px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        padding: 10px 0;
    }

    .rili-day {
        font-size: 35px;
        color: blue;
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 5px;
    }

    .rili-xingqi, .rili-nongli {
        display: block;
        width: 100%;
        text-align: center;
    }

    .rili-xingqi {
        font-size: 12px;
        line-height: 20px;
    }

    .rili-nongli {
        font-size: 12px;
        color: red;
        line-height: 20px;
    }

    .rili-buttom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        align-content: center;
    }

    .rili-buttom .item {
        flex-grow: 0;
        margin-top: 10px;
    }

    .rili .el-badge__content.is-fixed {
        right: 0px;
    }

    .content-main {
        background-color: #f5f5f5;
        border: 1px solid #99bce8;
        margin-top: 5px;
    }

    .msg-content {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .msg-content .block {
        width: 30%;
        height: 125px;
        border-radius: 8px;
        margin: 10px;
        background-color: #fff;

    }

    .msg-content .panel-inner {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .msg-content .panel-inner .avatar .el-avatar {
        background-color: #fff;
        color: #47a87f;
        border: 1px solid #47a87f;
        font-size: 36px;
    }

    .msg-content .panel-inner .avatar {
        margin-top: 20px;
        margin-left: 40px;
    }

    .msg-content .panel-inner .title, .msg-content .panel-inner .msg-counts {
        display: flex;
        flex-direction: column;
        margin: 20px;
    }

    .msg-content .panel-inner .title .msg-title {
        font-size: 20px;
    }

    .msg-content .panel-inner .title .msg-total {
        font-size: 12px;
        margin-top: 20px;
    }

    .msg-content .panel-inner .msg-counts .item {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .msg-content .panel-inner .msg-counts .item span:last-child {
        font-size: 16px;
        color: red;
    }

    .demo-basic--circle, .button-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .button-list {
        margin: 5px;
        margin-bottom: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        /*border: 2px solid #ccc;*/
        /*border-radius: 9px;*/
    }

    .button-list .block {
        flex: 1;
        display: flex;
        flex-direction: column;
        /*flex-grow: 1;*/
        margin-top: 10px;
    }

    .button-list .block .el-button{
        padding: 12px 5px !important;
    }


    .demo-basic--circle .block {
        flex: 1;
        display: flex;
        flex-direction: column;
        /*flex-grow: 1;*/
        margin-top: 15px;
        cursor: pointer;
        color: #8492a6;
    }

    .demo-basic--circle .block:hover {
        background-color: #e95352;
        color: #fff;
        border-radius: 8px;
    }

    .demo-basic--circle .block .title {
        margin-top: 10px;
        font-size: 14px;

        text-align: center;
    }

    .demo-basic--circle .el-avatar {
        display: inline-block;
        box-sizing: border-box;
        text-align: center;
        overflow: hidden;
        color: #fff;
        background: #f5f5f5;
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #f5f5f5;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #f5f5f5;
    }

    .el-header {
        height: 40px !important;
        background-color: #b81f1f;
        color: #fff;
    }

    .el-footer {
        background-color: #000;
        color: #A4A4A4;
        /*text-align: center;*/
        /*line-height: 60px;*/
    }

    .el-aside {
        background-color: #fff;
        color: #333;
        /*text-align: center;*/
        /*line-height: 200px;*/
    }

    .el-main {
        /*background-color: #E9EEF3;*/
        /*color: #333;*/
        padding: 0px;
        padding-top: 5px;
        /*text-align: center;*/
        /*line-height: 160px;*/
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        /*line-height: 260px;*/
    }

    .el-container:nth-child(7) .el-aside {
        /*line-height: 320px;*/
    }


    .el-row {
        margin-bottom: 20px;
    }

    .el-row:last-child {
        margin-bottom: 0;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #d8d8d8;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
        /*margin-top: 5px;*/
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .block .el-avatar>img{
        height: auto !important;
        margin: 22px auto;
        width: 36px;
    }
</style>
</head>
<body>

<div id="app">
    <el-container>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="3">
                    <div class="grid-content">
                        <a href="/" target="_self"><el-image
                                style="width: 200px; height: 38px"
                                src="./statics/images/logo.png"
                                fit="contain"></el-image></a>
                    </div>
                </el-col>
                <el-col :span="14">
                    <div class="grid-content " style="line-height: 40px;">

                        <el-row>
                            <el-col :span="2">
                                <div class="grid-content" style="text-align: center">
                                    <el-image style="width: 40px; height: 40px"
                                              src="./statics/images/head.png"></el-image>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="grid-content">
                                    <span>上午好！吴先生</span>
                                    <i class="el-icon-check"></i>
                                </div>
                            </el-col>
                            <!--                            <el-col :span="18">-->
<!--                                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" suffix-icon="el-icon-camera">-->
<!--                                    <el-select v-model="select" slot="prepend" placeholder="请选择">-->
<!--                                        <el-option label="款式" value="1"></el-option>-->
<!--                                        <el-option label="订单号" value="2"></el-option>-->
<!--                                        <el-option label="用户电话" value="3"></el-option>-->
<!--                                    </el-select>-->
<!--                                    <el-button slot="append" icon="el-icon-search"></el-button>-->
<!--                                </el-input>-->
<!--                            </el-col>-->
                        </el-row>


                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="grid-content" style="height: 40px;line-height: 40px;text-align: right">
                        <quanxian-text></quanxian-text>
                        <i class="el-icon-refresh-right" style="font-size: 20px"></i>
                        <i class="el-icon-full-screen" style="font-size: 20px;margin-left: 10px;"></i>
                        <i class="el-icon-close" style="font-size: 20px;margin-left: 10px;"></i>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="220px">

                <menus></menus>

                <div class="button-list">
                    <div class="block">
                        <el-button @click="open">网络查询</el-button>
                    </div>
                  <div class="block">
                        <el-button  >企业微信</el-button>
                    </div>
                    <div class="block">
                        <el-button @click="open2" class="el-icon-search">搜索</el-button>
                    </div>
                </div>

                <div class="rili">
                    <img style="width: 100%" src="./statics/images/rili.png" alt="">
                    <div class="rili-buttom">
                        <el-button class="item" size="mini">审批</el-button>
                        <el-button class="item" size="mini">公告</el-button>
                        <el-button class="item" size="mini">
                            <el-badge :value="0" :max="99">
                                邮件
                            </el-badge>
                        </el-button>

                    </div>
                    <div class="rili-buttom" style="padding-bottom: 20px">
                         <el-button class="item" size="mini">日程</el-button>
                        <el-button class="item" size="mini">秘书</el-button>
                        <el-button class="item" size="mini">电话</el-button>

                    </div>
                </div>

<!--                <div class="rili">-->
<!--                    <div class="rili-block">-->
<!--                        <span class="rili-date">2020-06-28</span>-->
<!--                        <div>-->
<!--                            <span class="rili-time">23:00</span>-->
<!--                            <span class="rili-day">28</span>-->
<!--                            <span class="rili-xingqi">星期日</span>-->
<!--                            <span class="rili-nongli">农历五月初八</span>-->
<!--                        </div>-->
<!--                        <div class="rili-buttom">-->
<!--                            <el-button class="item" size="mini">审批</el-button>
                        <el-button class="item" size="mini">公告</el-button>-->
<!--                            <el-button class="item" size="mini">-->
<!--                                <el-badge :value="0" :max="99">-->
<!--                                    邮件-->
<!--                                </el-badge>-->
<!--                            </el-button>-->

<!--                        </div>-->
<!--                        <div class="rili-buttom" style="padding-bottom: 20px">-->
<!--                             <el-button class="item" size="mini">日程</el-button>
                        <el-button class="item" size="mini">秘书</el-button>-->
<!--                            <el-button class="item" size="mini">电话</el-button>-->

<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->

            </el-aside>
            <el-container :style="{height: mainHeight}">
                <el-main :style="{height: mainHeight}">
                    <div class="content-main">
                        <el-tabs type="border-card" @tab-click="handleClick">
                            <el-tab-pane label="生产计划管理">
                                <plan-production></plan-production>
                            </el-tab-pane>
                            <el-tab-pane label="生产管理">
                                <el-tabs type="border-card">
                                    <el-tab-pane label="生产跟进">
                                        <order-list></order-list>
                                    </el-tab-pane>




                                    <el-tab-pane label="下班收箱">
                                        <order-list></order-list>
                                    </el-tab-pane>



                                </el-tabs>
                            </el-tab-pane>





<!--                            <el-tab-pane label="维修管理">
                                <order-list></order-list>
                            </el-tab-pane>-->
                            <el-tab-pane label="前端管理">
                                <design-list></design-list>
                            </el-tab-pane>
                            <el-tab-pane label="收发管理">
                                <shoufa-list></shoufa-list>
                            </el-tab-pane>
                            <el-tab-pane label="品检管理">
                                <pinjian-list></pinjian-list>
                            </el-tab-pane>
                            <el-tab-pane label="产品管理">
                                <product-manage-list></product-manage-list>
                            </el-tab-pane>
<!--                            <el-tab-pane label="生产成本管理">-->
<!--                                <product-cost-list></product-cost-list>-->
<!--                            </el-tab-pane>-->
                            <el-tab-pane label="效率管理">
                                <product-efficiency></product-efficiency>
                            </el-tab-pane>

                            <el-tab-pane label="打标管理">
                                <product-efficiency></product-efficiency>
                            </el-tab-pane>

                            <el-tab-pane label="盘点管理">

                                <el-tabs v-if="isOk === false" type="border-card">
                                    <el-tab-pane label="本期未盘">
                                        <pandian-record-list></pandian-record-list>
                                    </el-tab-pane>

                                    <el-tab-pane label="本期已盘">
                                        <pandian-record-list2></pandian-record-list2>
                                    </el-tab-pane>
                                    <el-tab-pane label="历史盘点">
                                        <pandian-record-list3></pandian-record-list3>
                                    </el-tab-pane>
                                </el-tabs>

                                <el-tabs v-if="isOk === true" type="border-card">
                                    <el-tab-pane label="自己盘点">
                                        <el-tabs type="border-card">
                                            <el-tab-pane label="本期未盘">
                                                <pandian-record-list></pandian-record-list>
                                            </el-tab-pane>

                                            <el-tab-pane label="本期已盘">
                                                <pandian-record-list2></pandian-record-list2>
                                            </el-tab-pane>
                                            <el-tab-pane label="历史盘点">
                                                <pandian-record-list3></pandian-record-list3>
                                            </el-tab-pane>
                                        </el-tabs>
                                    </el-tab-pane>
                                    <el-tab-pane label="上级盘点">
                                        <el-tabs type="border-card">
                                            <el-tab-pane label="本期未盘">
                                                <pandian-record-list></pandian-record-list>
                                            </el-tab-pane>

                                            <el-tab-pane label="本期已盘">
                                                <pandian-record-list2></pandian-record-list2>
                                            </el-tab-pane>
                                            <el-tab-pane label="历史盘点">
                                                <pandian-record-list3></pandian-record-list3>
                                            </el-tab-pane>
                                        </el-tabs>
                                    </el-tab-pane>

                                </el-tabs>
                            </el-tab-pane>

                        </el-tabs>
                    </div>
                </el-main>

            </el-container>
        </el-container>
        <el-footer style="height: 18px;">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content" style="text-align: center;font-size: 12px;min-height: 18px;">
                        Copyright ©2013 柏毓MOM系统   All rights reserved
                    </div>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>

</div>


</body>


<!-- import JavaScript -->
<script src="/public/js/index.js"></script>
<script>
  Vue.use(httpVueLoader)

  new Vue({
    el: '#app',
    data: function () {
      return {
        visible: false,
        isOk:false,
        value: new Date(),
        mainHeight: '790px',
        input1: '',
        input2: '',
        input3: '',
        select: ''
      }
    },
    components: {
      // 将组建加入组建库
      'plan-production': 'url:./component/plan-production.vue',
      'design-list': 'url:./component/design-list.vue',
      'shoufa-list': 'url:./component/shoufa-list.vue',
      'pinjian-list': 'url:./component/pinjian-list.vue',
      'product-manage-list': 'url:./component/product-manage-list.vue',
      'product-cost-list': 'url:./component/product-cost-list.vue',
      'product-efficiency': 'url:./component/product-efficiency.vue',
      'menus': 'url:./component/menus.vue',
      'quanxian-text': 'url:./component/quanxian-text.vue',
      'order-list': 'url:./component/order-list.vue',
      'pandian-record-list': 'url:./component/pandian-record-list.vue',
      'pandian-record-list2': 'url:./component/pandian-record-list2.vue',
      'pandian-record-list3': 'url:./component/pandian-history.vue',
    },
    methods: {
      open () {
        this.$prompt('请输入搜索内容', '百度搜索', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '搜索内容是: ' + value
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      handleClick(tab, event) {
        if(tab.label === "盘点管理" && this.isOk === false){
          this.$prompt('请输入上级密码', '上级密码', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
            // inputErrorMessage: '邮箱格式不正确'
          }).then(({ value }) => {
            if(value === "123123"){
              this.isOk = true
            }else{
              this.$message({
                type: 'error',
                message: '密码错误！不能进入'
              })
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            })
          })
        }
      },
      open2 () {
        this.$prompt('请输入搜索内容', '全局搜索', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          // inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '搜索内容是: ' + value
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          })
        })
      },
      goto (link) {
        console.log(link)
        window.location.href = './' + link + '.html'
      }
    },
    created () {
      var height = document.documentElement.clientHeight
      var newHeight = height - 40 - 20
      this.mainHeight = newHeight + 'px'
      return 1
    }
  })
</script>
</html>
